<template>
	<view class="container">
		<view class="cover"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			this.show()
		},
		methods: {
			show(){
			  let cover = document.querySelector('.cover');
			  let scale = 20;			
			  let bian = setInterval(()=>{			
			    scale = scale - 0.05;			
			    cover.style.cssText = `transform: scale(${scale});`			
			    if(scale<=1){
			      clearInterval(bian);
			    }			
			  },20)
			}
		}
	}
</script>

<style scoped>
.container{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.cover{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: scale(20);
  /* 元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 */
  mix-blend-mode: multiply;
}
.cover::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80rpx;
  height: 300rpx;
  transform: translate(-50%,-50%) skew(45deg);
  background-color: #fff;
}
.cover::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80rpx;
  height: 300rpx;
  transform: translate(-50%,-50%) skew(-45deg);
  background-color: #fff;
}
</style>
